<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
  <div>
    <b-form>
      <b-row>
        <b-col md="6">
          <b-form-group label="名称：" label-cols-sm="3" label-cols-lg="2">
            <b-form-input v-model="file_info.dataset_name" type="text" placeholder="请输入数据集名称"></b-form-input>
          </b-form-group>
        </b-col>
        <b-col md="6">
          <b-form-group label="公开：" label-cols-sm="3" label-cols-lg="2">
            <b-form-checkbox
              v-model="file_info.is_public"
              :value="true"
              :unchecked-value="false"
              class="pt-2"
            >是</b-form-checkbox>
          </b-form-group>
        </b-col>
        <b-col md="6">
          <b-form-group :label="'数据集：'" label-cols-sm="3" label-cols-lg="2">
            <b-form-file
              v-model="file"
              placeholder="请选择或拖动文件"
              drop-placeholder="请拖动至此处"
              browse-text="浏览"
            ></b-form-file>
          </b-form-group>
        </b-col>
      </b-row>
      <div class="text-center">
        <b-spinner variant="primary" style="width: 3rem; height: 3rem;" v-if="is_loading"></b-spinner>
      </div>
      <b-button
        v-if="!is_loading"
        block
        @click="postDataset({file_info, file})"
        variant="primary"
        :style="style.submitBtn"
      >上传</b-button>
    </b-form>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { closeDialog } from "../store/utils";

export default {
  name: "UploadDataset",
  data: function() {
    return {
      file: null,
      file_info: {
        dataset_name: "",
        is_public: true
      },
      style: {
        title: {
          fontSize: "20px"
        },
        submitBtn: {
          marginTop: "20px"
        },
        checkbox: {
          marginLeft: "10px",
          marginRight: "10px"
        }
      }
    };
  },
  computed: mapState("dataset", {
    errors: state => state.errors,
    options: state => state.options,
    is_loading: state => state.is_loading,
  }),
  methods: {
    ...mapActions("dataset", ["postDataset"]),
    closeDialog
  }
};
</script>